<template>


  <!-- container -->
  <section class="container">
    <el-row>
      <el-col :span="24">
        <section id="portfolio" class="page-section section appear clearfix">
          <br/>
          <br/>


          <el-row>
            <el-col :span="24" class="grid">
              <el-input v-model="like" @blur="InitData" clearable class="place-self-center w-1/3" @keyup.enter="InitData" placeholder="回车键检索">检索</el-input>
            </el-col>
            <el-col :span="24">
              <nav id="filter" class="col-md-12 text-center">
                <ul>
                  <li><a :class="{current:notConclud}" @click="notConclud=true;Conclud=false;InitData()"
                         class="cursor-pointer btn-theme btn-small">未结题</a></li>
                  <li><a :class="{current:byTeacher}" @click="byTeacher=!byTeacher;InitData()"
                         class="cursor-pointer btn-theme btn-small">教师发起</a></li>
                  <li><a :class="{current:important}" @click="important=!important;InitData()"
                         class="cursor-pointer btn-theme btn-small">重要</a></li>
                  <li><a :class="{current:Conclud}" @click="Conclud=true;notConclud=false;InitData()"
                         class="cursor-pointer btn-theme btn-small">已结题</a></li>
                </ul>
              </nav>
            </el-col>

            <el-col :span="24">
              <el-row :gutter="20">
                <el-col :span="8" class="mb-12" v-for="(item,index) in discussList">
                  <el-card class="box-card">
                    <template #header>
                      <div class="card-header">
                        <span>{{ item.Topic }}</span>
                        <el-button @click="ToDiscussDetail(item)" class="button float-right" type="text">进入话题
                        </el-button>
                      </div>
                    </template>
                    <p>发起人: {{ item.SponsorName }}<span v-text="item.IfTeacher==='1'?'  教师':''"></span></p>

                  </el-card>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

        </section>
      </el-col>
    </el-row>

  </section>

</template>

<script>
import axios from "axios";

export default {
  name: "discussList",
  data() {
    return {
      discussList: [],
      notConclud: true,
      byTeacher: false,
      important: false,
      Conclud: false,
      page:1,
      pageSize:10,
      like:'',
      couldNext : true
    }
  },
  created() {
    this.setUpData()
  },
  methods: {
    nextPage(){
      console.log("innnn")
      this.page++
      this.couldNext=false
      this.setUpData()
    },
    handleScroll() {
      var currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var currentHeight =  document.documentElement.scrollHeight || document.body.scrollHeight;
      if (currentHeight-currentScroll <1300 && this.couldNext){
        console.log("in")
        this.nextPage()
      }
    },
    InitData() {
      this.page = 1
      var params = {
        page:this.page,
        pageSize : this.pageSize
      }
      if (this.like!==""){
        params.like = this.like
      }
      if (this.Conclud){
        params.done=1
      }
      if (this.notConclud){
        params.done=0
      }
      if (this.byTeacher){
        params.onlyTeacher = "1"
      }
      if (this.important){
        params.important = "1"
      }
      axios.get("/api/ListDiscussTopic", {
        params: params
      }).then((res) => {
        if (res.status === 200) {
          console.log("ad",res.data)
          this.discussList=res.data
          this.couldNext=true
        }
      })
    },
    setUpData() {
      var params = {
        page:this.page,
        pageSize : this.pageSize
      }
      if (this.like!==""){
        params.like = this.like
      }
      if (this.Conclud){
        params.done=1
      }
      if (this.notConclud){
        params.done=0
      }
      if (this.byTeacher){
        params.onlyTeacher = "1"
      }
      if (this.important){
        params.important = "1"
      }
      axios.get("/api/ListDiscussTopic", {
        params: params
      }).then((res) => {
        if (res.status === 200) {
          console.log("da",res.data)
          if (res.data!==null){
            // console.log("da",res.data)
            this.discussList.push(...res.data)
            this.couldNext=true
          }
        }
      })
    },
    ToDiscussDetail(item) {

      console.log(item)
      this.$sestor.pushByNameResId('disscussDetail', item)
      // this.$router.push({name:'disscussDetail',params:{discuss:JSON.stringify(item)}})
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, true);
  }
}
</script>

<style scoped>

</style>